import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:pet_app/base/base_list_view.dart';
import 'package:pet_app/components/ArcPainter.dart';
import 'package:pet_app/components/back_btn/view.dart';
import 'package:pet_app/model/breed_item.dart';
import 'package:pet_app/widget/KeepAliveWrapper.dart';
import 'package:pet_app/widget/app_net_image.dart';

import 'logic.dart';

class BreedSearchPage extends BaseListView<BreedSearchLogic> {
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return SafeArea(
        child: Container(
      child: buildContent(),
    ));
  }

  @override
  Widget buildContent() {
    final logic = Get.put(BreedSearchLogic());
    return Column(
      children: [
        Container(
          decoration: const BoxDecoration(color: Colors.orangeAccent),
          child: Padding(
            padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 16),
            child: Row(
              children: [
                BackBtnComponent(
                  bgColor: Colors.orangeAccent.withOpacity(0.8),
                ),
                // const Expanded(child: SizedBox()),
                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.only(right: 16.0, left: 16),
                    child: SizedBox(
                      height: 40,
                      child: GetBuilder<BreedSearchLogic>(
                          id: 'searchBtn',
                          builder: (logic) {
                            return TextField(
                              textAlignVertical: TextAlignVertical.center,
                              cursorColor: Colors.orangeAccent,
                              style: TextStyle(color: Colors.black87),
                              controller: logic.textEditingController,
                              onChanged: logic.onChanged,
                              decoration: InputDecoration(
                                hintText: '品种名称',
                                fillColor: Colors.white,
                                //背景颜色，必须结合filled: true,才有效
                                filled: true,
                                //必须设置为true，fillColor才有效
                                isDense: true,
                                contentPadding: EdgeInsets.zero,
                                hintStyle:
                                    TextStyle(color: Colors.grey.shade400),
                                // isCollapsed: true,
                                prefixIcon: Icon(Icons.search),
                                prefixIconColor: Colors.grey.shade400,
                                suffixIcon: logic.name.isNotEmpty
                                    ? IconButton(
                                        icon: Icon(Icons.clear),
                                        onPressed: () {
                                          logic.textEditingController.clear();
                                          logic.onChanged('');
                                        },
                                      )
                                    : null,
                                border: OutlineInputBorder(
                                  borderRadius: BorderRadius.circular(50.0),
                                  borderSide: BorderSide.none, // 设置圆角半径
                                ),
                                enabledBorder: OutlineInputBorder(
                                  borderRadius: BorderRadius.circular(50.0),
                                  borderSide: BorderSide.none,
                                ),
                                focusedBorder: OutlineInputBorder(
                                  borderRadius: BorderRadius.circular(50.0),
                                  borderSide: BorderSide.none,
                                ),
                              ),
                            );
                          }),
                    ),
                  ),
                ),
                Padding(
                  padding: EdgeInsets.only(right: 16),
                  child: GestureDetector(
                    onTap: logic.search,
                    child: CircleAvatar(
                      child: Icon(Icons.search,color: Colors.orangeAccent,),
                      backgroundColor: Colors.white,
                    ),
                  ),
                )
              ],
            ),
          ),
        ),
        Expanded(
          child: Stack(
            children: [
              Container(
                decoration: const BoxDecoration(
                    color: Colors.orangeAccent,
                    borderRadius: BorderRadius.only(
                        bottomLeft: Radius.circular(32),
                        bottomRight: Radius.circular(32))),
                height: 60,
              ),
              Positioned(
                  bottom: 0,
                  left: 0,
                  right: 0,
                  child: CustomPaint(
                    painter: ArcPainter(Colors.orangeAccent),
                    child: Container(
                      height: 0,
                    ),
                  )),
              GetBuilder<BreedSearchLogic>(builder: (logic) {
                return createRefresherListView(
                    controller,
                    (baseLogic) => ListView.builder(
                          itemCount: controller.breedItemList.length,
                          itemBuilder: (BuildContext context, int index) =>
                              _buildItem(
                                  controller.breedItemList[index], controller),
                        ));
              }),
            ],
          ),
        ),
      ],
    );
  }
}

Widget _buildItem(BreedItem breedItem, BreedSearchLogic logic) {
  return GestureDetector(
    onTap: () {
      logic.toArticlePage(breedItem.breedId!);
    },
    child: Card(
      margin: const EdgeInsets.only(left: 16, right: 16, bottom: 8, top: 8),
      clipBehavior: Clip.antiAlias,
      surfaceTintColor: Colors.white,
      elevation: 4,
      shadowColor: Colors.amber.withOpacity(0.6),
      child: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: ClipRRect(
              borderRadius: const BorderRadius.all(Radius.circular(8)),
              child: KeepAliveWrapper(
                  child: AppNetImage(
                      imageUrl: breedItem.imageUrl! +
                          '?x-oss-process=image/resize,p_30')),
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(bottom: 16, top: 8),
            child: Text(
              breedItem.name!,
              style: TextStyle(color: Colors.black.withOpacity(0.7)),
            ),
          )
        ],
      ),
    ),
  );
}
